<template>
	<view class="container">
		<!-- 订单信息 -->
		<view class="orderMessage">
			<text class="orderMessageTitle">订单信息</text>
			<uni-card>
				<view class="orderMessageDetail">
					<view class="orderNumberCount">
						<text class="orderNumber">订单号：121212112487878</text>
						<text class="completed">已完成</text><br>
					</view>
					<view class="orderDateMessage">
						<text class="orderDate">服务项目：车辆保养</text>
					</view>
					<view class="orderDateMessage">
						<text class="orderDate">下单时间：2020.01.08 17:40</text>
					</view>
					<view class="orderDateMessage">
						<text class="orderDate">预约时间：2020.01.08 17:40</text>
					</view>
					<text class="orderCar">车辆：奔驰FWE4/豫A98FHJ</text><br>
					<text class="orderRemark">备注：</text>
				</view>
			</uni-card>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetail">
			<text class="orderTitle">订单详情</text>
			<uni-card>
				<view class="orderService">
					<view class="clearCarDetail">
						<text class="clearCar">车辆精洗</text>
						<text class="clearPrice">￥ 199</text><br>
					</view>
					<text class="clearCarPrice">车辆附加费用</text>
					<text class="clearCarPriceDetail">￥ 199</text>
				</view>
			</uni-card>
			<uni-card>
				<view class="orderServicePrice">
					<view class="originalDetail">
						<text class="original">原价</text>
						<text class="originalPrice">￥100</text><br>
					</view>
					<view class="favorableDetail">
						<text class="favorable">优惠</text>
						<text class="favorablePrice">-￥10</text><br>
					</view>
					<view class="orderCountPrice">
						<text class="payPrice">支付金额</text>
						<text class="originalPriceDeatil">￥90</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="evaluateResult">
			<view class="evaluateResultTitle">
				评价结果
			</view>
			<view class="evaluateTime">
				<text>评价时间：2022-10-10 11:09 </text>
			</view>
			<view class="evaluateRate">
				<view class="rating">
					评价结果：
				</view>
				<uni-rate :readonly="true" size="18" :value="3" />
			</view>
			<view class="evaluateContent">
				<text>评语：评语评语评语评语评语评语评语评语评语</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	.orderMessage {
		padding-top: 10px;
	}

	/* 订单信息 */
	.orderMessageTitle {
		font-size: 18px;
		margin-left: 20px;
	}

	.orderMessageDetail {
		height: 155px;
	}

	.orderMessageDetail view {
		margin-bottom: 6px;
	}

	.orderMessageDetail view:last-child {
		margin-bottom: 0;
		/* 最后一行不需要底部外边距 */
	}

	.orderNumber,
	.orderDate,
	.orderCar,
	.orderRemark,
	.evaluateTime,
	.rating,
	.evaluateContent {
		font-size: 16px;
	}
	.completed{
		margin-left: 40px;
		color: #EA1703;
	}

	/* 订单信息 */
	.orderTitle {
		margin-left: 20px;
		font-size: 18px;
		color: #101010;
	}

	/* 车辆精洗 */
	.orderService {
		width: 348px;
		height: 70px;
	}

	.clearCarDetail {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.clearCar {
		width: 56px;
		height: 20px;
		font-size: 16px;
		margin-right: 180px;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.clearPrice {
		font-size: 14px;
		width: 50px;
		height: 21px;
	}

	.clearCarPrice {
		width: 56px;
		height: 20px;
		font-size: 16px;
		margin-right: 150px;
		font-weight: bold;
	}

	.clearCarPriceDetail {
		font-size: 14px;
		width: 50px;
		height: 21px;
	}

	/* 订单价格 */
	.orderServicePrice {
		width: 330px;
		height: 98px;
	}

	.originalDetail {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.original {
		width: 56px;
		height: 20px;
		font-size: 16px;
		margin-right: 220px;
	}

	.favorableDetail {
		margin-right: 40px;
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 2px solid #BBBBBB;
		margin-bottom: 0;
	}

	.favorable {
		width: 56px;
		height: 20px;
		font-size: 16px;
		margin-right: 220px;
		margin-bottom: 10px;
	}

	.favorablePrice {
		color: #FF2525;
		font-size: 14px;
		margin-bottom: 10px;
	}

	/* 支付金额 */
	.orderCountPrice {
		width: 348px;
		height: 34px;
		margin-top: 10px;
	}

	.payPrice {
		font-size: 16px;
		margin-right: 190px;
	}

	.originalPriceDeatil {
		font-size: 16px;
		color: #101010;
		font-weight: bold;
	}

	/* 评价结果 */
	.evaluateResult {
		margin-left: 20px;
	}

	.evaluateResult view {
		margin-bottom: 10px;
	}

	.evaluateResultTitle {
		font-size: 18px;
		color: #101010;
	}
	.evaluateRate{
		display: flex;
	}
	.rating{
		margin-right: 6px;
	}
	.evaluateContent{
		padding-bottom: 60px;
		width: 320px;
	}
</style>